<template>
	<div >
		<div class="box">
			<div class="left"></div>
			<div class="left-right"></div>
			<div class="front"></div>
			<div class="fron-back"></div>
			<div class="top"></div>
			<div class="top-bottom">
			</div>
		</div>
	</div>
</template>

<script>
</script>

<style>
	.box{
		margin-top: 200px;
		margin-left: 300px;
		width: 800px;
		position: relative;
		transform-style: preserve-3d;
		transform-origin: center;
		transform: rotateX(146deg) rotateY(50deg) rotateZ(0deg)
	}
	.box > div{
		position: absolute;
		opacity: 0.5;
	}
	
	.front,.fron-back{
		background-color: red;
		width: 800px;
		height: 30px;
	}
	.front{
		background-color: red;
	}
	.fron-back{
		background-color: firebrick;
	}
	.fron-back{
		transform: translateZ(-100px);
	}
	.left,.left-right{
		width: 100px;
		height: 30px;
	}
	.left{
		background-color: green;
	}
	.left-right{
		background-color: yellowgreen;
	}
	.left{
		transform-origin: left;
		transform: rotateY(90deg);
	}
	.left-right{
		transform-origin:800px 0 0;
		transform: rotateY(90deg) translateX(800px);
	}
	.top,.top-bottom{
		
		width: 800px;
		height: 100px;
	}
	.top{
		background-color: gray;
	}
	.top-bottom{
		background-color: burlywood;
	}
	.top{
		transform-origin: top;
		transform: rotateX(90deg) translateY(-100px);;
	}
	.top-bottom{
		transform-origin: bottom;
		transform: rotateX(90deg) translateZ(70px);
	}
	
</style>